<script lang="ts" setup>
const {id} = defineProps<{
    id: number
    title: string
    active?: boolean
}>()

const {change} = $(useCategory())

</script>

<template>
    <view class="item">
        <text :class="active && 'active'" @click="change({ categoryParentId: id, categoryId: -1 })">
            {{ title }}
        </text>
    </view>
</template>

<style lang="scss" scoped>
.item {
    width: 160rpx;
    height: 40rpx;
    color: #333333;
    font-size: 22rpx;
    text-align: center;
    line-height: 40rpx;
    margin-bottom: 18rpx;
    background-color: #f0f0f0;

    text {
        width: 100%;
        height: 100%;
        display: block;
        padding: 2rpx;
        border-radius: 8rpx;
    }

    & .active {
        color: white;
        background-color: #f38e48;
        padding-left: 4rpx;
    }
}
</style>
